Partimos de un proyecto base de ionic, primero tenemos que instalar el siguiente plugin de capacitor:
npm install @capacitor/push-notifications
npx cap sync
Crear App Firebase
Creamos un proyecto nuevo de firebase, una vez dentro del proyecto nos vamos a messaging:
Añadimos una App de Android:
Indicamos el nombre del paquete de nuestra App, se encuentra en el archivo build.gradle a nivel de app
Lo indicamos en el proyecto de firebase:
Nos descargamos el archivo google-services.json
y lo ponemos a la altura del build.gradle a nivel de app:
El paso de agregar el SDK nos los podemos saltar, porque esto ya lo hace el plugin de ionic por nosotros.
Una vez hecho esto ya podemos crear nuestra primera campaña para enviar notificaciones push:
Pero antes vamos a configurar la aplicación de ionic para que se registre y pueda recibir las notificaiones.
Configuración App Ionic
Primero añadimos la configuración en el AndroidManifest.xml para indicar el icono que mostraran las notificaciones:
<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@mipmap/ic_launcher_round">
</meta-data>Este código lo colocamos dentro de la etiqueta application:
NOTA: en las versiones mas recientes de Android el icono se muestra como silueta, por lo tanto no veremos la imagen en si, solo la silueta.
A continuación añadimos en el mismo sitio (archivo AndroidManifest.xml y dentro del tag applications) la configuración para añadir un canal por defecto para las notificaciones push:
<meta-data
android:name="com.google.firebase.messaging.default_notification_channel_id"
android:value="MY_CHANNEL_NAME">
</meta-data>
MY_CHANNEL_NAME es el nombre del canal al que asignamos el canal por defecto
Este canal por defecto entra en funcionamiento en el caso de que en la notificación no se haya indicado ningun canal concreto.
En el archivo app.component.ts ponemos el siguiente código para añadir los listeners y solicitar permisos para recibir notificaciones.
ngOnInit(): void {
this.addListeners()
this.registerNotifications()
this.getDeliveredNotifications()
}
addListeners = async () => {
await PushNotifications.addListener('registration', token => {
console.info('Registration token: ', token.value);
});
await PushNotifications.addListener('registrationError', err => {
console.error('Registration error: ', err.error);
});
await PushNotifications.addListener('pushNotificationReceived', notification => {
console.log('Push notification received: ', notification);
});
await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
console.log('Push notification action performed', notification.actionId, notification.inputValue);
});
}
registerNotifications = async () => {
let permStatus = await PushNotifications.checkPermissions();
if (permStatus.receive === 'prompt') {
permStatus = await PushNotifications.requestPermissions();
}
if (permStatus.receive !== 'granted') {
throw new Error('User denied permissions!');
}
await PushNotifications.createChannel({id:"MY_CHANNEL_NAME",name:"DEFAULT_CHANNEL", importance:4})
await PushNotifications.register();
}
getDeliveredNotifications = async () => {
const notificationList = await PushNotifications.getDeliveredNotifications();
console.log('delivered notifications', notificationList);
}En la funcion registerNotifications al crear el canal tenemos que indicar el mismo nombre que indicamos al configurar el canal por defecto MY_CHANNEL_NAME en este caso, otro aspecto importante del canal es que podemos indicar el importance que tendrán las notificaciones de este canal, podemos consultar los diferentes tipos de importance en esta página.
En este punto ya podemos crear una campaña desde firebase para enviar notificaciones push.
Crear campaña en firebase
Desde la interfaz de firebase en el apartado messaging que configuramos previamente hacemos click en Crear la primera campaña:
Seleccionamos Mensajes de Firebase Notifications:
En la siguiente pantalla podemos crear una campaña para enviar notificaciones push pero tambien nos permite hacer pruebas.
Ponemos un titulo de mensaje y un mensaje y le damos a Enviar mensaje de prueba:
Al enviar un mensaje de prueba se nos pedirá el token del dispositivo al que queremos mandar el mensaje, cuando creamos una campaña se manda a todos los dispositivos, pero en el modo de prueba tenemos que indicar a que dispositivo concreto.
El token del dispositivo lo podemos sacar de la salida de la consola de la App movil (en el código de arriba está puesto para que al registrarse se muestre el token):
Introducimos el token en la interfaz y le damos a Probar:
En este momento recibiremos la notificación push SOLO si tenemos la App cerrada:
Si tenemos la App abierta la notificación la veremos por consola:
Mas adelante muestro la configuración para que la notificación se muestre igualmente aunque la App esté abierta.
Una vez verificamos con la prueba que las notificaciones funcionan podemos terminar de crear la campaña:
En la siguiente sección podemos indicar que segmento recibirá la notificación (si tenemos google analytics activado podemos hacer filtros bastante concretos) en este caso simplemente se la mandaremos a todos los que tengan la App:
Indicamos en que momento se enviará la notificación:
En esta ultima sección podemos indicar un canal concreto al que queramos enviar la notificación, en este caso vamos a dejarlo vacio así la notificación será manejada por el canal por defecto que hemos configurado.
NOTA: por defecto el sonido viene "inhabilitado" pero por lo que yo he probado, aunque lo dejes así las notificaciones suenan igual.
